var arr = [
    {x:-64, s:.83, z:1},
    {x:140, s:1,   z:2},
    {x:338, s:.83, z:1},
    {x:960, s:.83, z:1},
    {x:960, s:.83, z:1},
    {x:960, s:.83, z:1},
]
function render(){
    var swiperObjs = document.querySelectorAll('.swiper .swiper-slide')
    swiperObjs.forEach(function(item,i){
        item.style.transform = `translateX(${arr[i].x}px) scale(${arr[i].s})`
        item.style.zIndex = arr[i].z
    })
}
render()
function next(){
    var temp = arr.pop()
    arr.unshift(temp)
    console.log(arr);
    render()
}
document.querySelector('.swiper .swiper-next').onclick = next

function prev(){
    var temp = arr.shift()
    arr.push(temp)
    render()
}
document.querySelector('.swiper .swiper-prev').onclick = prev

document.querySelector('.swiper .swiper-wrapper').onclick = function(evt){
    var e = evt || window.event
    var target = e.target || e.srcElement
    if(target.parentNode.style.transform.includes('64px')){
        prev()
    }
    if(target.parentNode.style.transform.includes('338px')){
        next()
    }
}
